<template>
	<view class="content">
		<view class="shijian">
			<view class="kssj">
				<gui-datetime @confirm="confirm1" :value="demo1Val" :isTime="false" height="500rpx" :start-year='2018'>
					<text class="gui-block gui-icons">{{demo1Val}} &#xe6d1;</text>
				</gui-datetime>
			</view>
			<view class="">~</view>
			<view class="jssj">
				<gui-datetime @confirm="confirm2" :value="demo2Val" :isTime="false" height="500rpx" :start-year='2018'>
					<text class="gui-block gui-icons">{{demo2Val}} &#xe6d1;</text>
				</gui-datetime>
			</view>
			<!-- <view>确认</view> -->
		</view>

		<view style="text-align: center; margin-top: 150rpx;" v-if="list.length <= 0">暂无数据</view>

		<view style="margin-top: 15rpx; font-size: 30rpx;">
			<view class="jilu" v-for="(item, idx) in list">
				<view class="">
					<view class="" style="margin-bottom: 15rpx;">项目: {{item.fee_items}}</view>
					<view class="" style="margin-top: 15rpx; font-size: 26rpx;">{{item.created_at}}</view>
				</view>
				<view class="" style="color: #da1d22;">金额: {{item.Price}}</view>
			</view>
		</view>
		<uni-pagination style="width: 92%; margin: 0 auto; margin-top: 20rpx;" :show-icon="true" :total="zongshu"
			:pageSize="pageSize" @change="change" />

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync("member"),
				demo1Val: "请选择开始日期",
				demo2Val: "请选择结束日期",
				list: [],
				zongshu: null,
				page: 1, // 当前加载的页码
				pageSize: 10, // 每页加载的数据数量
			}
		},
		onLoad() {
			const today = new Date();
			const year = today.getFullYear(); // 获取年份
			const month = today.getMonth() + 1; // 获取月份，记得加1
			const day = today.getDate();
			this.demo1Val = '2018-01-01'
			this.demo2Val = year + '-' + month + '-' + day
			this.lishi();
		},
		methods: {
			change(e) {
				// console.log('e: ', e.type);
				let self = this
				if (e.type == 'next') {
					self.page++
					self.lishi()
				} else if (e.type == 'prev') {
					self.page--
					self.lishi()
				}
			},
			confirm1: function(res) {
				this.demo1Val = res[0] + '-' + res[1] + '-' + res[2];
				console.log('开始时间: ', this.demo1Val);
				this.lishi();
			},
			confirm2: function(res) {
				this.demo2Val = res[0] + '-' + res[1] + '-' + res[2];
				console.log('结束时间: ', this.demo2Val);
				this.lishi();
			},
			lishi() {
				let self = this
				// let url = 'https://jf.boyaltd.cn/api/get_order'
				let url = 'https://jf.lgwisdomunion.cn/api/get_order'
				let data = {
					"name": self.user.name,
					"pages": self.page,
					"price": 0,
					"sele_fee": null,
					"uuid": self.user.uuid,
					"time": {
						"star_time": self.demo1Val,
						"end_time": self.demo2Val
					},
					"token": uni.getStorageSync("ttsxAuthToken")
				};
				
				self.$boya.Request({
					url: '/get_order',
					data: data
				}, function(res) {
					self.zongshu = res.data.count
					console.log('lishi: ', res.data);
					self.list = res.data.data
				}, function(err) {
					console.log('lishiErr: ', err);
				})
			},
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100%;
		/* background: url('../../static/bj1.jpg') 100% 100% / 100% 100%; */
		background-color: white;
	}

	.shijian {
		height: 100rpx;
		font-size: 34rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		background-color: #ccc;
	}

	.jilu {
		width: 85%;
		height: 100rpx;
		padding: 12rpx 15rpx 6rpx 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		/* background-color: white; */
		border-bottom: 1px solid #c8c8c8;
	}
</style>